<template>
  <div>
    <h1>MinIo</h1>
    <el-upload
      class="upload-demo"
      action="xx"
      :on-change="handleChange"
      :http-request="uploadFile"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-progress
      v-if="uploadPercentage"
      :text-inside="true"
      :stroke-width="22"
      :percentage="uploadPercentage"
      status="warning"
    ></el-progress>
    <hr />

    <el-button type="primary" @click="downfilehandler">下载文件</el-button>
    <el-progress
      v-if="percentage"
      :text-inside="true"
      :stroke-width="22"
      :percentage="percentage"
      status="warning"
    ></el-progress>
  </div>
</template>
<script>
import {
  getClientInfo,
  uploadMinIo,
  downFile,
  getFileTempUrl,
} from "@/util/minio";
export default {
  mame: "Demo",
  mounted() {
    let c = getClientInfo();
    console.log("c", c);
  },
  components: {},
  data() {
    return {
      file: null,
      lastFileName: "",
      percentage: 0,
      uploadPercentage: 0,
    };
  },
  methods: {
    uploadFile(data) {
      // console.log("data", data);
      uploadMinIo(data.file).then((res) => {
        console.log("res", res);
        if (res.state === "ok") {
          this.$message.success("上传成功！");
          this.lastFileName = res.fileName;
        }
      });
    },
    handleChange(file, fileList) {
      // console.log("fileList", fileList);
      // console.log("file", file);
    },
    downfilehandler() {
      downFile(this.lastFileName, (data) => {
        if (data) {
          let { percentage } = data;
          this.percentage = percentage;
        }
      });
    },
  },
};
</script>
<style lang="scss"></style>
